<template>
  <div>
    <h2>Home</h2>
    <input v-model="value" type="text" />
  </div>
</template>

<script>
export default {
  /**
   * 1. 让 DevTools 显示
   * 2. 给到 KeepAlive 的 include or exclude 使用时需要用到
   * 3. 组件要递归调用自身时需要用到
   */
  name: "Home",

  data() {
    return {
      value: "",
    };
  },

  mounted() {
    console.log("Home mounted");
  },

  unmounted() {
    console.log("Home unmounted");
  },

  activated() {
    console.log("Home activated");
    // 代理 挂载的一些事情
    this.timer = setInterval(() => {
      console.log("Home");
    }, 1000);
  },

  deactivated() {
    console.log("Home deactivated");
    // 代替 卸载的一些事情，收尾工作
    clearInterval(this.timer);
  },
};
</script>
